<template>
    <div class='fxn-aside'>
        <el-menu :default-active="$route.path" background-color="#FFFFFF" text-color="#74798C" active-text-color="#FF1654" :router="true" unique-opened>
            <template v-for="(item, key) in menuData" :key="item.id">
                <el-sub-menu :index="String(key)">
                    <template #title>
                        <i class="iconfont fxn-ft-18 fxn-margin-r-4" :class="item.icon"></i>
                        <span>{{ item.label }}</span>
                    </template>
                    <el-menu-item-group>
                        <router-link v-for="(items, keys) in item.children" :key="keys" :to="items.node_path">
                            <el-menu-item :index="items.node_path">{{ items.label }}</el-menu-item>
                        </router-link>
                    </el-menu-item-group>
                </el-sub-menu>
            </template>
        </el-menu>
    </div>
</template>

<script>
    import { defineComponent, reactive, getCurrentInstance, onMounted, toRefs, computed } from 'vue'
    import { useRouter } from 'vue-router'
    import { useStore } from 'vuex'
    export default defineComponent({
        name: '',
        setup() {
            const { proxy } = getCurrentInstance();
            const router = useRouter();
            const store = useStore();

            //初始化数据
            const state = reactive({
                menuData: [
                    {icon: "icon-tasklist",id: 6,label: "团队管理",node_path: "#",pid: 0,children: [
                        {icon: "",id: 61,label: "团队列表",node_path: "/TeamManage",pid: 6},
                    ]},
                    {icon: "icon-setup",id: 1,label: "系统管理",node_path: "#",pid: 0,children: [
                        {icon: "",id: 15,label: "菜单管理",node_path: "/MenuManage",pid: 1},
                        {icon: "",id: 15,label: "数据字典",node_path: "/DataManage",pid: 1},
                    ]},
                ],                
            })
            
            //Dom加载
            onMounted(()=>{
                localStorage.setItem('menuData',JSON.stringify(state.menuData));
            })
            
            return {
                ...toRefs(state),
                
                //请求方法
                
                //组件方法
            }

        },
    })
</script>

<style scoped>
    .fxn-aside{
        position: fixed;
        top: 68px;
        left: 0;
        bottom: 0;
        width: 230px;
        z-index: 8;
        background: #FFFFFF;
        overflow-x: auto;
    }

    .fxn-aside::-webkit-scrollbar {
        display: none;
    }

    .fxn-aside .el-menu {
        border-right: 0;
        transition: .3s width ease-in-out,left .3s ease-in-out,right .3s ease-in-out;
    }
</style>